<script lang="ts" setup xmlns="">
import {
  Document,
  House,
  User,
  Setting,
  ChatDotRound,
} from '@element-plus/icons-vue'

defineProps({
  status: Boolean
});
</script>
<template>
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse-transition="true"
      :collapse="status"
      :router="true"
      active-text-color="#a4cab6"

  >
    <el-menu-item :index="{'name':'first'}">
      <el-icon>
        <House/>
      </el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-sub-menu index="2">
      <template #title>
        <el-icon>
          <User/>
        </el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="{'name':'user'}">用户管理</el-menu-item>
        <el-menu-item :index="{'name':'role'}">角色管理</el-menu-item>
        <el-menu-item index="1-3">路由管理</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon>
          <document/>
        </el-icon>
        <span>工具管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="{'name':'generator'}">数据库表管理</el-menu-item>
        <el-menu-item :index="{'name':'setting'}">生成器配置</el-menu-item>
        <el-menu-item :index="{'name':'oss'}">文件上传管理</el-menu-item>
        <el-menu-item :index="{'name':'pay'}">支付管理</el-menu-item>
        <el-menu-item :index="{'name':'task'}">任务中心</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item :index="{'name':'chat'}">
      <el-icon><ChatDotRound /></el-icon>
      <template #title>对话</template>
    </el-menu-item>
    <el-menu-item :index="{'name':'setting'}">
      <el-icon>
        <setting/>
      </el-icon>
      <template #title>设置</template>
    </el-menu-item>
  </el-menu>
</template>

<style>
.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width; /* 优化动画性能 */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
  height: 100%;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}

/* 优化菜单项动画 */
.el-menu-item,
.el-sub-menu {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

/* 优化图标和文字动画 */
.el-menu-item .el-icon,
.el-sub-menu .el-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* 折叠时的动画优化 */
.el-menu--collapse .el-menu-item,
.el-menu--collapse .el-sub-menu {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 防止动画期间的闪烁 */
.el-menu-vertical-demo * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
</style>
